<template>
  <div class="app-container inden-manage sticky-box">
    <div>
      <avue-form
        :option="option"
        v-model="queryParams"
        ref="searchForm"
        v-show="showSearch"
        @keydown.enter="getList"
      >
        <!-- <template #customerId>
          <el-select
            class="w-full"
            v-model="queryParams.customerId"
            placeholder="请选择客户名称"
            @focus="selectCustomerFn('customerId')"
          >
            <el-option
              v-for="item in customerOption['customerId']"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select> -->
        <!-- <el-select
            v-model="queryParams.customerId"
            placeholder="请选择客户名称"
            class="w-full"
            filterable
            remote
            clearable
            :remote-method="queryCustomer"
            :loading="loadingSelect"
            no-data-text="未查询到客户"
          >
            <el-option
              v-for="item in parentOptions"
              :key="item.id"
              :label="item.customerName"
              :value="item.id"
            >
              <div>
                <span>{{ item.customerName }}</span>
              </div>
            </el-option>
          </el-select>
        </template> -->
        <template #menu-form>
          <el-button icon="Search" type="primary" @click="getList" class="m-l-3"
            >查询</el-button
          >
          <el-button icon="Refresh" @click="handleEmpty(searchForm)"
            >重置</el-button
          >
          <el-button icon="Download" @click="exportDetail">导出</el-button>
        </template>
      </avue-form>

      <el-row :gutter="10" class="my-4">
        <!-- <right-toolbar @queryTable="getList" v-model:showSearch="showSearch">
          <el-tooltip
            class="item"
            effect="dark"
            :content="'自定义列表'"
            placement="top"
          >
            <el-button circle icon="Menu" @click="handleTable()" />
          </el-tooltip>
        </right-toolbar> -->
      </el-row>

      <el-table
        class="sticky-table"
        v-loading="loading"
        :data="tableList"
        row-key="id"
        stripe
        border
        :scrollbar-always-on="true"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          fixed="left"
        />
        <el-table-column
          v-for="(item, index) in tableCol.filter(item => item.show)"
          :key="index"
          v-bind="item"
        >
          <template #default="scope">
            <div v-if="item.tooltip">
              <el-tooltip
                :disabled="!scope.row.invoiceMsg"
                effect="dark"
                :content="item.tooltip(scope.row)"
                placement="top"
              >
                {{ item.tooltipVal(scope.row) }}
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          align="center"
          width="220"
          fixed="right"
          class-name="small-padding"
        >
          <template #header>
            <div>操作</div>
          </template>
          <template #default="scope">
            <el-button
              plain
              size="small"
              type="primary"
              icon="Postcard"
              style="padding-left: 0.5rem; padding-right: 0.5rem"
              @click="handleFollowUp(scope.row)"
              >跟进</el-button
            >
            <el-button
              plain
              size="small"
              type="primary"
              icon="Sort"
              style="padding-left: 0.5rem; padding-right: 0.5rem"
              @click="handleFollowUpDia(scope.row)"
              >跟进记录</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 自定义订单列表弹窗 -->
      <DiaFixTable
        v-model="diaTable.open"
        :dialogParam="diaTable"
        @ok="diaTableFn"
      />
    </div>
  </div>
</template>
<script setup name="Summary">
import { reactive, toRefs, ref, toRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { nicheSummaryList } from '@/api/nicheManage/index'
import { treeselect } from '@/api/rsgl/zzjg'
import { getPricipalId, viewFile, initTable } from '@/utils/commo'
import { parseTime, selectDictLabel } from '@/utils/ruoyi'
import useCommonStore from '@/store/modules/common'
import useUserStore from '@/store/modules/user'
// 列表配置
const INITTABLE = [
  // {
  //   show: true,
  //   prop: 'registrationTime',
  //   label: '登记日期',
  //   align: 'center',
  //   width: 180,
  //   showOverflowTooltip: true
  //   // formatter: row => {
  //   //   return parseTime(row.repaymentDeadline, '{y}-{m}-{d}')
  //   // }
  // },
  {
    show: true,
    prop: 'belongName',
    label: '归属人姓名',
    align: 'center',
    width: 160,
    showOverflowTooltip: true
  },
  {
    show: true,
    prop: 'name',
    label: '产品名称',
    align: 'center',
    minWidth: 160,
    showOverflowTooltip: true
  },
  {
    show: true,
    prop: 'num',
    label: '产品数量',
    align: 'center',
    width: 160,
    showOverflowTooltip: true
  },
  {
    show: true,
    prop: 'number',
    label: '产品编号',
    align: 'center',
    width: 230,
    showOverflowTooltip: true
  }
]

const commonStore = useCommonStore()

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const userStore = useUserStore()

import {
  business_stage,
  business_source,
  project_type,
  business_customer_type,
  industry_category
} from '@/hooks/dict/business.js'

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  ids: [],
  selectArr: [],
  total: 0,
  option: {
    labelWidth: '10',
    menuSpan: 6,
    submitBtn: false,
    menuPosition: 'left',
    // gutter: 30,
    emptyBtn: false,
    column: [
      {
        // label: '性别',
        span: 4,
        prop: 'productName',
        placeholder: '产品名称',
        type: 'input'
      },
      {
        // label: '性别',
        span: 4,
        prop: 'status',
        placeholder: '商机阶段',
        type: 'select',
        multiple: false,
        // filterable: true,//模糊搜索
        dicData: business_stage
      },
      {
        // label: '性别',
        span: 4,
        prop: 'resource',
        placeholder: '商机来源',
        type: 'select',
        multiple: false,
        // filterable: true,//模糊搜索
        dicData: business_source
      },
      {
        prop: 'createTimeArr',
        type: 'daterange',
        span: 6,
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间'
      }
    ]
  },
  showSearch: true,
  disUpdate: true /* 编辑按钮是否可编辑 */,
  disDelete: true /* 关闭按钮是否可编辑 */,
  disTransfer: true /* 转入知识库是否可编辑 */,
  loading: false,
  tableList: []
})
const {
  queryParams,
  ids,
  selectArr,
  total,
  option,
  showSearch,
  disUpdate,
  disDelete,
  disTransfer,
  loading,
  tableList
} = toRefs(data)
watch(
  [() => route.query.salesOrderData],
  async () => {
    if (route.query.salesOrderData) {
      queryParams.value = JSON.parse(route.query.salesOrderData)
      getList()
    }
  },
  {
    immediate: true
  }
)

const tableCol = ref(INITTABLE)
// 自定义列表弹窗参数
const diaTable = ref({
  open: false,
  tableName: 'nicheSummaryTable',
  tableCol: tableCol.value,
  initCol: INITTABLE
})

// 自定义列表
const handleTable = () => {
  // diaTable.value = {
  //   open: true,
  //   tableName: 'nicheSummaryTable',
  //   tableCol: tableCol.value,
  //   initCol: INITTABLE
  // }
  diaTable.value.open = true
  diaTable.value.tableCol = tableCol.value
}

// 获取列表配置
const diaTableFn = value => {
  tableCol.value = value
}

// 初始化
async function init() {
  // 初始化列表配置
  // tableCol.value = initTable(diaTable.value.tableName, INITTABLE)

  // 归属部门
  getList()
}

// 重置
function handleEmpty(formEl) {
  proxy.resetForm('searchForm')
  // proxy.$refs.searchForm.resetForm()
  getList()
}

// 获取数据列表
function getList() {
  loading.value = true
  nicheSummaryList(queryParams.value).then(res => {
    loading.value = false
    tableList.value = res.rows
    total.value = res.total
  })
  console.log('获取数据')
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  selectArr.value = selection
  disUpdate.value = selection.length != 1
  disDelete.value = !selection.length
  let transfer = selection.some(item => item.isTransfer == '是')
  disTransfer.value = !selection.length || transfer
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}

// 导出明细
const exportDetail = () => {
  proxy.downLoadByUrl(
    '/ord/small/medium/statistics/export',
    queryParams.value,
    '商机汇总.xlsx'
  )
}

init()
</script>
<style scoped lang="scss">
@import '@/assets/styles/myStyle.scss';
</style>
<style scoped lang="scss">
.search-drawer-retract {
  color: #999999;
}
</style>
